<template>
  <!--交付记录/发货明细-->
  <div>
    <!--全部-->
    <div>
      <!--value报错-->
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="datavalue" placeholder="全部数据">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input placeholder="请输入内容" style="width: 150px"></el-input>
      <el-select v-model="jhValue" placeholder="产品名称" style="width: 120px">
        <el-option v-for="item in jhOptions" :key="item.value"
                   :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button icon="el-icon-search" size="small" circle></el-button>
    </div>
    <!--新建-->
    <div style="margin-top: 15px;overflow: hidden;">
      <div class="col-sm-交付计划6 text-left" style="margin-bottom: 20px">
        <span set-lan="html:合同订单">交付记录/发货明细</span>
        <small class="text-muted font-13">共0条</small>
      </div>
      <div class="col-sm-6 text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
      </div>
      <!--交付记录/发货明细dialog-->
      <el-dialog title="交付记录" :visible.sync="dialogFormVisible" width="60%" style="color: #333333"  >
        <el-form :model="DeliveryRecord" label-width="100px" :rules="rules">
          <hr style="margin-top: -20px;margin-bottom: 15px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="对应客户:" style="width: 830px">
                <el-input v-model="DeliveryRecord.client"></el-input>
              </el-form-item>
              <div class="form-inline">
                <el-input size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                <el-button size="medium" icon="el-icon-search"></el-button>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同订单:">
                <el-select placeholder="未选" style="width: 730px" ></el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品名称:" style="width: 370px">
                <el-input style="width: 296px">
                  <el-button slot="append" icon="el-icon-search" ></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单价:" style="width: 370px">
                <el-input style="width: 296px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="交付数量:" style="width: 395px">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交付日期:" style="width: 395px">
                <el-date-picker  type="date" placeholder="选择日期" style="width: 296px"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对方接收人:" style="width: 395px">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额:" style="width: 395px">
                <el-input :disabled="true" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注:" style="width: 395px">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单个成本:" style="width: 395px">
                <el-input></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button type="primary">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
        </div>
      </el-dialog>
    </div>
    <!--交付计划-->
    <el-table ref="multipleTable" :data="DeliveryRecordTable" tooltip-effect="dark"
              style="width: 100%"  @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="id" label="ID" wsortable></el-table-column>
      <el-table-column prop="delivery_date" label="交付日期">

      </el-table-column>
      <el-table-column prop="product_name" label="产品名称">
        <template slot-scope="scope">
          <router-link :to="'/deliveryrecordview'">
            <div style="color: #333333">
              <i class="el-icon-caret-right"></i>
              <span >{{scope.row.product_name}}</span>
            </div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="contract_id" label="合同订单号"></el-table-column>
      <el-table-column prop="client" label="对应客户" >
        <template slot-scope="scope">
          <router-link :to="'/deliveryrecordview'">
            <div style="color: #333333">
              <span >{{scope.row.contract_id}}</span>
              <i class="el-icon-s-opportunity"></i>
            </div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="delivery_quantity" label="交付数量" ></el-table-column>
      <el-table-column prop="amount_of_money" label="金额" ></el-table-column>
      <el-table-column prop="single_cost" label="单个成本" ></el-table-column>
      <el-table-column prop="receiver" label="对方接收人" ></el-table-column>
      <el-table-column prop="type" label="类型" ></el-table-column>
      <el-table-column prop="" label="操作" width="135px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)"
                     icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
          <el-button size="mini" @click="handleDelete(scope.row)"
                     icon="el-icon-delete" type="danger" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row>
      <el-col :span="8">
        <el-button style="padding: 12px 10px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
      </el-col>
      <el-col :span="16">
        <el-pagination :page-size="100" layout="prev, pager, next, jumper"
                       :total="1000"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      //头部搜索框
      jhOptions: [{
        value: '1',
        label: '交付日期'
      }, {
        value: '2',
        label: '产品名称'
      }, {
        value: '3',
        label: '对应客户'
      }],
      jhValue: '',
      //导航搜索
      activeIndex: '2',
      /*下拉框条件查询*/
      options: [{
        value: '选项1',
        label: '全部数据'
      }, {
        value: '选项2',
        label: '合同交付'
      }, {
        value: '选项3',
        label: '发货明细'
      }, {
        value: '选项4',
        label: '销售发货单明细'
      }],
      datavalue:'',
      dialogFormVisible: false,
      totalSize: 0,
      DeliveryRecordTable: [{
        id:1,
        delivery_date:'2020-2-3',
        product_name:'佳佳酱',
        contract_id:'yf7779999',
        client:'妖兽',
        delivery_quantity:100,
        amount_of_money:100000.00,
        single_cost:100.00,
        receiver:'陈晓',
        type:'合同交付',
      }, {
        id:2,
        delivery_date:'2020-3-3',
        product_name:'六六六',
        contract_id:'yf778899',
        client:'王霸',
        delivery_quantity:10,
        amount_of_money:10000.00,
        single_cost:100.00,
        receiver:'陈晓',
        type:'合同交付',
      }],
      DeliveryRecord: {
        id:0,//交付记录id
        delivery_date:'',//交付日期
        product_name:'',//产品名称
        contract_id:'',//合同订单号
        client:'',//客户名称
        delivery_quantity:0,//交付数量
        amount_of_money:0.00,//金额
        single_cost:0.00,//单个成本
        receiver:'',//对方接收人
        type:'',//订单类型
      },
      //弹出框的期次
      periods: [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '2'
      }, {
        value: '选项3',
        label: '3'
      }, {
        value: '选项4',
        label: '4'
      }, {
        value: '选项5',
        label: '5'
      }, {
        value: '选项6',
        label: '6'
      }],
      // 是否提醒
      radio:2,
      periodvalue: '',
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,

      rules: {
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]},
      mulSelection: []
    }
  },
  methods: {
    // 导航搜索
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleEdit (val) {
      this.dialogFormVisible = true
      this.DeliveryRecord = val
    },
    openView (val) {
      this.$axios.post('http://localhost:8080/#/deliveryplanview')
    },
    handleDelete (val) {
      this.$confirm('此操作将永久删除销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(val['id'])
        this.$axios.post('http://localhost:8080/save-emp', this.qs.stringify(val['id']))
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    deleteAll () {
      this.mulSelection.forEach(row => {
        console.log(row)
        this.$axios.post('http://localhost:8080/#/deliveryplanview', this.qs.stringify(row))
      })
    },
    //客户签约人与我方签约人
    loadAll() {
      return [
        { "value": "陈浩南", "address": "crm工大小组" },
        { "value": "张三疯", "address": "crm工大小组" }
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style>
  .font-14{
    font-size: 14px
  }
  .col-sm-6 {
    width: 50%;
    position: relative;
    min-height: 1px;

  }
  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-left{
    text-align: left;
    float: left;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
</style>
